import { chartEncaps } from './chartEncaps.js'

let drawd2 = obj => {
  // obj = {
  //   _t: this,
  //   doms: 'mycharts
  // }
  let ww = obj._t.$refs.mycharts
  if (ww.innerHTML !== '') {
    ww.innerHTML = ''
    obj._t.chart = {}
  }
  let w = 778
  let h = 732
  let pad

  let statAreaAttr = obj._t.chartsConData.statAreaAttr
  switch (statAreaAttr) {
    case '380':
      if (obj._t.chartsConData.thumbnail === '1') {
        w = 778
        h = 732
        pad = [50, 10, 40, 10]
      } else {
        w = 778
        h = 804
        pad = [10, 10, 0, 10]
      }
      break
    default:
      w = obj._t.chartsConData.citySize[statAreaAttr][0]
      h = obj._t.chartsConData.citySize[statAreaAttr][1]
      pad = [30, 30]
  }
  obj._t.chart = new obj._t.$Chart({
    container: obj.doms,
    width: w,
    height: h,
    padding: pad
  })
  // obj._t.chart = new obj._t.$Chart({
  //   container: obj.doms,
  //   width: 768,
  //   height: 787,
  //   padding: [20, 10]
  // })
  var userData = [...obj._t.chartData]
  chartEncaps.setJson({ _t: obj._t }).then(res => {
    let callList = []
    for (let i in userData) {
      for (let j in res.features) {
        if (res.features[j].properties.name === userData[i].name) {
          callList.push(userData[i])
          break
        }
      }
    }

    userData = callList
    let GeoJSONNewData = res
    var geoDv = new obj._t.$DataSet.View()
      .source(GeoJSONNewData, {
        type: 'GeoJSON'
      })
      .transform({
        type: 'map',
        callback(row) {
          for (let i in userData) {
            if (row.name.includes(userData[i].name)) {
              userData[i].longitude = row.centroidX
              userData[i].latitude = row.centroidY
              userData[i].name = row.name
              break
            }
          }
          return row
        }
      })
    chartEncaps.setDisplay({ doms: obj.doms, display: 'block' })
    obj._t.chart.tooltip({
      showTitle: false,
      showMarkers: false,
      shared: true,
      itemTpl:
        '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{value}</li>'
    })
    chartEncaps.setDisplay({ doms: obj.doms, display: 'block' })
    obj._t.chart.scale({
      latitude: {
        sync: true
      },
      longitude: {
        sync: true
      }
    })
    obj._t.chart.legend(false)
    obj._t.chart.axis(false)

    var geoView = obj._t.chart.createView()
    geoView.data(geoDv.rows)
    if (obj._t.chartsConData.statAreaAttr === '380') {
      geoView
        .polygon()
        .position('longitude*latitude')
        .color('#FCF9F2')
        .tooltip('name*value')
        .style({
          lineWidth: 1,
          stroke: '#333'
        })
    } else {
      if (obj._t.chartsConData.cityShow === '1') {
        geoView
          .polygon()
          .position('longitude*latitude')
          .color('#FCF9F2')
          .label('name', name => {
            let offset = 0
            switch (statAreaAttr) {
              case '727':
                switch (name) {
                  case '东城区':
                    offset = -20
                    break
                }
                break
              default:
                offset = 0
            }

            return {
              offset,
              style: {
                fill: '#000',
                fontSize: obj._t.chartsConData.textSize // 文本大小
              }
            }
          })
          .tooltip('name*value')
          .style({
            lineWidth: 1,
            stroke: '#333'
          })
      } else {
        geoView
          .polygon()
          .position('longitude*latitude')
          .color('#FCF9F2')
          .tooltip('name*value')
          .style({
            lineWidth: 1,
            stroke: '#333'
          })
      }
    }

    var userView = obj._t.chart.createView()
    userView.data(userData)
    userView
      .heatmap()
      .position('longitude*latitude')
      .color('value', obj._t.color)
      .size(500 / 20)
      .style({
        blur: 500 / 15
      })
    obj._t.chart.render()
    if (obj._t.chartsConData.statAreaAttr === '380') {
      obj._t.mapFlag = true
      chartEncaps.setDisplay({ doms: obj.doms, display: 'block' })
    } else {
      obj._t.mapFlag = false
      chartEncaps.setDisplay({ doms: obj.doms, display: 'table' })
    }
    obj._t.setLoading(false)
    obj._t.setshadeDisplay(true)
  })
}

export { drawd2 }
